Add block inserter flag and initial infrastructure #193

kean · 2025-10-09T14:56:49Z

What?

Add isNativeInserterEnabled flag to EditorConfiguration
Add the initial infrastructure to show the native inserter
Update the demo to show the editor as a modal sheet to match the way it's used in the app

Part of #162.

Testing Instructions

See recording

Screenshots or screencast

Screen.Recording.2025-10-09.at.10.56.08.AM.mov

kean · 2025-10-09T14:57:55Z

ios/Demo-iOS/Gutenberg.xcodeproj/xcshareddata/xcschemes/Gutenberg.xcscheme

            key = "GUTENBERG_EDITOR_URL"
            value = "http://localhost:5173/"
-            isEnabled = "NO">
+            isEnabled = "YES">


Since #191 (comment), should we enable GUTENBERG_EDITOR_URL by default? I keep doing this every time I work on the editor.

Sounds good to me. However, let's also enable the GUTENBERG_EDITOR_REMOTE_URL environment variable as well.

We should also update the README documentation to match the new default settings. The README recently changed. I suggest rebasing this atop the latest trunk branch and applying the following diff

diff --git a/README.md b/README.md index 977bcba..9993c75 100644 --- a/README.md +++ b/README.md @@ -26,17 +26,19 @@ Once finished, the web app can now be accessed in your browser by visiting the U ### Demo App -This demo app is useful for quickly testing changes made to the editor. By default, the demo app uses a production build of the web app bundled with the GutenbergKit package—i.e., the output of the project's `make build` command. During development, however, it is more useful to run the web app with a server and provide the server URL as an environment variable for the demo app, so that changes are displayed in the app immediately. +This demo app is useful for quickly testing changes made to the editor. #### iOS +The iOS demo app loads the development server by default. + 1. Start the development server by running `make dev-server`. 1. Launch Xcode and open the `ios/Demo-iOS/Gutenberg.xcodeproj` project. 1. Select the `Gutenberg` target. -1. Navigate to _Product_ → _Scheme_ → _Edit Scheme_. -1. Add an environment variable named `GUTENBERG_EDITOR_URL` with the development server URL. 1. Run the app. +Alternatively, you can load a production build of the web app bundled with the GutenbergKit package by running `make build` and disabling the `GUTENBERG_EDITOR_URL` environment variable by navigating to _Product_ → _Scheme_ → _Edit Scheme_ in Xcode. + <details> <summary>Example Xcode environment variable</summary> @@ -46,6 +48,8 @@ This demo app is useful for quickly testing changes made to the editor. By defau #### Android +The Android demo app loads the production build of the web app bundled with the GutenbergKit package by default—i.e., the output of the project's `make build` command). It can be configured to load the development server by setting a `GUTENBERG_EDITOR_URL` environment variable in the `android/local.properties` file. + 1. Start the development server by running `make dev-server`. 1. Launch Android Studio and open the `android` project. 1. Modify the `android/local.properties` file to include an environment variable named `GUTENBERG_EDITOR_URL` with the development server URL.

kean · 2025-10-09T14:58:25Z

ios/Demo-iOS/Sources/ContentView.swift

-        #warning("1. Update the siteURL and authHeader values below")
-        #warning("2. Install the Jetpack plugin to the site")
+        // Steps:
+        // 1. Update the siteURL and authHeader values below


These shouldn't be warnings.

kean · 2025-10-09T14:58:49Z

ios/Demo-iOS/Sources/EditorView.swift

    private let configuration: EditorConfiguration

    @State private var viewModel = EditorViewModel()
-    @State private var editorViewController: EditorViewController?


Follow-up to the previous PR

kean · 2025-10-09T15:01:28Z

src/components/editor-toolbar/style.scss

 }
+
+// Style the add block button with rounded black background
+.gutenberg-kit-editor-toolbar .gutenberg-kit-add-block-button {


I don't feel strongly about it, but ToolbarButton needed some design. I don't think it needs to stand out as much as it currently does (a single black spot on the entire screen).

I think this is fine for now. Eventually, we need to consideration Android design patterns.

kean · 2025-10-09T15:02:02Z

src/utils/bridge.js

+export function showBlockInserter() {
+	const blocks = getBlockTypes().map( ( blockType ) => {
+		return {
+			name: blockType.name,


Only passing the information we need to show the editor (except for the icons – we'll need to figure out how to manage those).

dcalhoun

Looks like a solid start. I left a few suggestions, but approving because this worked as expected for me.

dcalhoun · 2025-10-10T16:47:40Z

ios/Demo-iOS/Gutenberg.xcodeproj/xcshareddata/xcschemes/Gutenberg.xcscheme

            key = "GUTENBERG_EDITOR_URL"
            value = "http://localhost:5173/"
-            isEnabled = "NO">
+            isEnabled = "YES">


Sounds good to me. However, let's also enable the GUTENBERG_EDITOR_REMOTE_URL environment variable as well.

We should also update the README documentation to match the new default settings. The README recently changed. I suggest rebasing this atop the latest trunk branch and applying the following diff

diff --git a/README.md b/README.md index 977bcba..9993c75 100644 --- a/README.md +++ b/README.md @@ -26,17 +26,19 @@ Once finished, the web app can now be accessed in your browser by visiting the U ### Demo App -This demo app is useful for quickly testing changes made to the editor. By default, the demo app uses a production build of the web app bundled with the GutenbergKit package—i.e., the output of the project's `make build` command. During development, however, it is more useful to run the web app with a server and provide the server URL as an environment variable for the demo app, so that changes are displayed in the app immediately. +This demo app is useful for quickly testing changes made to the editor. #### iOS +The iOS demo app loads the development server by default. + 1. Start the development server by running `make dev-server`. 1. Launch Xcode and open the `ios/Demo-iOS/Gutenberg.xcodeproj` project. 1. Select the `Gutenberg` target. -1. Navigate to _Product_ → _Scheme_ → _Edit Scheme_. -1. Add an environment variable named `GUTENBERG_EDITOR_URL` with the development server URL. 1. Run the app. +Alternatively, you can load a production build of the web app bundled with the GutenbergKit package by running `make build` and disabling the `GUTENBERG_EDITOR_URL` environment variable by navigating to _Product_ → _Scheme_ → _Edit Scheme_ in Xcode. + <details> <summary>Example Xcode environment variable</summary> @@ -46,6 +48,8 @@ This demo app is useful for quickly testing changes made to the editor. By defau #### Android +The Android demo app loads the production build of the web app bundled with the GutenbergKit package by default—i.e., the output of the project's `make build` command). It can be configured to load the development server by setting a `GUTENBERG_EDITOR_URL` environment variable in the `android/local.properties` file. + 1. Start the development server by running `make dev-server`. 1. Launch Android Studio and open the `android` project. 1. Modify the `android/local.properties` file to include an environment variable named `GUTENBERG_EDITOR_URL` with the development server URL.

dcalhoun · 2025-10-10T17:03:57Z

ios/Demo-iOS/Sources/ContentView.swift

-                    EditorView(configuration: .default)
-                } label: {
-                    Text("Bundled Editor")
+                Button("Show Editor") {


I suggest retaining "bundled" somewhere to differentiate from the remote editors and remain aligned with Android's demo app/project documentation.

dcalhoun · 2025-10-10T17:15:14Z

src/components/editor-toolbar/index.jsx

+				if ( isInserterOpened ) {
+					setIsInserterOpened( false );
+				}


Is this achieving a specific outcome?

dcalhoun · 2025-10-10T17:16:42Z

src/components/editor-toolbar/style.scss

+		display: block;
+	}
+
+	// width: 50px;


This commented code should likely be removed.

dcalhoun · 2025-10-10T17:17:39Z

src/components/editor-toolbar/style.scss

 }
+
+// Style the add block button with rounded black background
+.gutenberg-kit-editor-toolbar .gutenberg-kit-add-block-button {


I think this is fine for now. Eventually, we need to consideration Android design patterns.

dcalhoun · 2025-10-10T17:19:30Z

src/components/editor-toolbar/style.scss

+	svg {
+		background: #eae9ec;
+		border-radius: 18px;
+		color: wordpress.$black;
+		padding: 1px;
+		width: 32px;
+		height: 32px;
+		display: block;
+	}


I suggest we place this after the attributes declared for .gutenberg-kit-editor-toolbar .gutenberg-kit-add-block-button. I.e., move this after the current line 88.

kean added 5 commits October 9, 2025 10:25

Add initial infrastructureto show native block inseter

3d859a6

Remove unused state

2049952

Revert

f13b38a

Add a way to configure the remote editor

d9c1786

Remove warnings

19816f6

kean commented Oct 9, 2025

View reviewed changes

kean requested a review from dcalhoun October 9, 2025 15:02

Fix lint errors

c0b3604

dcalhoun approved these changes Oct 10, 2025

View reviewed changes

Add block inserter flag and initial infrastructure #193

Are you sure you want to change the base?

Add block inserter flag and initial infrastructure #193

Uh oh!

Conversation

kean commented Oct 9, 2025

What?

Testing Instructions

Screenshots or screencast

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

kean Oct 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

dcalhoun left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

kean Oct 9, 2025 •

edited

Loading